<template>
  <div class="page main-settings">
    <div class="scroll-view">
      <customHeader v-if="type==17||type==18||type==21||type==37" :middleTitle="headerTitle" @leftCallBack="goBack" @rightCallBack="refresh">
        <i class="zhk-sxan" :class="{'refreshing':refreshing}"></i>
      </customHeader>
      <customHeader v-else :middleTitle="headerTitle" @leftCallBack="goBack">
      </customHeader>
      <messageComfirm
        rightText="保存"
        @leftCallBack="cancelDeviceName"
        @rightCallBack="submitDeviceName"
        :visible="modalVisible"
        :rightBtnDisabled="!deviceName"
      >
        <div class="update-device-name">
          <div class="title">修改设备名称</div>
          <inputClear
            class="device-name"
            v-model="deviceName"
            :max="8"
            :maxlength="8"
            placeholder="请输入设备名称"
          />
          <span class="tip">最多不超过8个字</span>
        </div>
      </messageComfirm>
      <div class="page-body">
        <div class="top">
          <div class="bg" :class="statusClass(deviceInfo.status)">
            <div class="xhtb-list">
              <i class="zhk-xhtb"></i>
              <i class="zhk-xhtb"></i>
            </div>
            <div class="device-name" v-if="type==18">{{deviceInfo.deviceName}}</div>
            <template v-if="type==17">
              <div class="status-text init" v-if="deviceInfo.status==''">获取状态中...</div>
              <div class="status-text online" v-if="deviceInfo.status=='1'">
                <i class="zhk-yxzc"></i>
                <p>设备在线</p>
              </div>
              <div class="status-text offline" v-if="deviceInfo.status=='0'">
                <i class="zhk-sbylx"></i>
                <p>设备已离线</p>
              </div>
              <div class="equi"></div>
            </template>
            <template v-if="type==18">
              <div class="eq" :class="statusClass(deviceInfo.status)">
                <div class="inner" v-if="deviceInfo.status==''">
                  <div class="init-loadding"></div>
                  <p>获取状态中...</p>
                </div>
                <div class="inner" v-if="deviceInfo.status=='1'">
                  <i class="zhk-yxzc"></i>
                  <p>设备在线</p>
                </div>
                <div class="inner" v-if="deviceInfo.status=='0'">
                  <i class="zhk-sbylx"></i>
                  <p>设备已离线</p>
                </div>
              </div>
            </template>
            <template v-if="type==20||type==32||type==38">
              <div class="eq kxh" >
              </div>
            </template>
            <!-- 码先声Ⅱ -->
            <template v-if="type==21">
              <div class="status-text init" v-if="deviceInfo.status==''">获取状态中...</div>
              <div class="status-text online" v-if="deviceInfo.status=='1'">
                <i class="zhk-yxzc"></i>
                <p>设备在线</p>
              </div>
              <div class="status-text offline" v-if="deviceInfo.status=='0'">
                <i class="zhk-sbylx"></i>
                <p>设备已离线</p>
              </div>
              <div class="equi2"></div>
            </template>
            <!-- 码先声Ⅲ -->
            <template v-if="type==37">
              <div class="status-text init" v-if="deviceInfo.status==''">获取状态中...</div>
              <div class="status-text online" v-if="deviceInfo.status=='1'">
                <i class="zhk-yxzc"></i>
                <p>设备在线</p>
              </div>
              <div class="status-text offline" v-if="deviceInfo.status=='0'">
                <i class="zhk-sbylx"></i>
                <p>设备已离线</p>
              </div>
              <div class="equi3"></div>
            </template>
            <ul class="circles">
              <li></li>
              <li></li>
              <li></li>
            </ul>
          </div>
          <div class="shop-info">
            <div class="shop-name">{{deviceInfo.shopName}}</div>
            <div class="shop-id" @click="doCopy(shopId)">ShopID：{{shopId}}</div>
          </div>
        </div>
        <ul class="ul-list">
          <li v-if="type==17||type==18||type==21||type==37" @click="linkToSoundSettings">
            <span>
              <i class="zhk-skyysz"></i>
              收款语音设置
            </span>
            <div>
              <i class="zhk-list_rarrow"></i>
            </div>
          </li>
          <li v-if="type==18||type==20||type==32||type==38" @click="linkToWiFiSettings">
            <span>
              <i class="zhk-pzwifi"></i>
              配置Wi-Fi
            </span>
            <div>
              <i class="zhk-list_rarrow"></i>
            </div>
          </li>
          <!-- 码先声Ⅲ -->
          <li v-if="type==37" @click="$router.push({path:'/maSanNetwork'})">
            <span><i class="zhk-pzwifi"></i>配置Wi-Fi</span>
            <div><i class="zhk-list_rarrow"></i></div>
          </li>
          <li v-if="type==18" @click="linkToDeviceName">
            <span>
              <i class="zhk-xgsbmc"></i>
              修改设备名称
            </span>
            <div>
              <i class="zhk-list_rarrow"></i>
            </div>
          </li>
          <li @click="doCopy(sn)">
            <span>
              <i class="zhk-xlh"></i>
              设备序列号
            </span>
            <div>{{sn}}</div>
          </li>
          <li v-if="type==18" @click="linkToAdPic">
            <span>
              <i class="zhk-szggtp"></i>
              设置广告图片
            </span>
            <div>
              <i class="zhk-list_rarrow"></i>
            </div>
          </li>
        </ul>
        <ul class="ul-list" v-if="type==51||type==55||type==57||type==58||type==59||type==60||type==61">
          <li @click="linkToSoundSettings">
            <span>
              <i class="zhk-skyysz"></i>
              收款语音播报
            </span>
            <div>
              <i class="zhk-list_rarrow"></i>
            </div>
          </li>
        </ul>
        <ul class="ul-list" v-if="type==54">
          <li @click="linkToPayPrintSettings">
            <span>
              <i class="zhk-skyysz"></i>
              支付打印设置
            </span>
            <div>
              已绑定{{ bindCodePlateList.length }}张码牌
              <i class="zhk-list_rarrow"></i>
            </div>
          </li>
        </ul>
        <ul class="ul-list" v-else>
          <li @click="handleUnBind">
            <span>
              <i class="zhk-jcbd"></i>
              解除绑定
            </span>
            <div>
              <i class="zhk-list_rarrow"></i>
            </div>
          </li>
        </ul>
        <p class="sm-txt" v-if="type==37"><router-link to="/maSanInstructions">设备使用说明</router-link></p>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import customHeader from "../../components/header/header";
import messageComfirm from "../../components/messageComfirm/messageComfirm";
import inputClear from "../../components/inputClear/inputClear";
import { Toast, MessageBox } from "mint-ui";
import jsBridge from "../../tools/jsBridge.js";
import VueClipboard from "vue-clipboard2";
Vue.use(VueClipboard);
export default {
  name: "mainSettings",
  data() {
    return {
      sn: "",
      type: "",
      shopId: "",
      shopName: "",
      supplierId: "",
      modalVisible: false,
      deviceName: "",
      printSourceSwitch: 0,
      bindCodePlateList: [],
      deviceInfo: {
        shopId: "",
        shopName: "",
        sn: "",
        status: "",
        type: "",
        deviceName: ""
      },
      from: "", //从哪个页面跳转过来的
      refreshing: false,
      timer: null
    };
  },
  methods: {
    //返回
    goBack() {
      MessageBox.close(false);
      if (this.from == "machinesManage") {
        this.$router.back();
        return;
      }
      //this.$router.push({ path: "/" });
      jsBridge.closeWindow();
    },
    statusClass(status) {
      //快小盒只显示初始状态样式
      if (this.type == 20||this.type == 32) {
        return "init";
      }


      if (status == "1") {
        return "online";
      } else if (status == "0") {
        return "offline";
      }
       else {
        return "init";
      }
    },
    //刷新
    refresh() {
      if (this.refreshing) {
        return;
      }
      this.refreshing = true;
      this.refreshRequest();
      const timer = window.setTimeout(() => {
        this.getDeviceInfo(() => {
          this.refreshing = false;
          this.timer = null;
        });
      }, 5000);
    },
    //刷新请求
    refreshRequest() {
      this.deviceInfo.status = "";
      const url = `app/voice/pushQueryDeviceInfo.do?sn=${this.sn}&type=${
        this.type
        }`;
      this.ajax({
        url: url,
        type: "get",
        controlLoading: false
      })
        .then(res => {
          if (res.success == true) {
            // this.deviceInfo.shopId = res.resultObject.shopId;
            // this.deviceInfo.shopName = res.resultObject.shopName;
            // this.deviceInfo.sn = res.resultObject.sn;
            // this.deviceInfo.status = res.resultObject.status;
            // this.deviceInfo.type = res.resultObject.type;
          } else {
            Toast(res.msg);
          }
        })
        .catch(err => {

        });
    },
    // 获取支付绑定码牌的数量
    getPrintBindCodePlateCount() {
      let param = {sn: this.sn, shopId: this.shopId, supplierId: this.supplierId, deviceName: this.deviceName, deviceType: this.type};
      const url = `app/remote/print/findPrintBindCodePlateList.do`;
      this.ajax({
        url: url,
        type: "post",
        data: param,
        controlLoading: false
      })
        .then(res => {
          if (res.success == true) {
            this.bindCodePlateList = res.resultObject;
          } else {
            Toast(res.msg);
          }
        })
        .catch(err => {

        });
    },
    //跳转收款语音设置
    linkToSoundSettings() {
      if (!this.shopId) {
        Toast("未获取到设备信息");
        return;
      }
      const url = "/qrCodeSound/mainSettings/soundSettings";
      this.$router.push({
        path: url,
        query: { sn: this.sn, shopId: this.shopId, type: this.type, deviceName: this.deviceName}
      });
    },
    // 支付打印设置
    linkToPayPrintSettings() {
      const url = "/qrCodeSound/mainSettings/paySettings";
      this.$router.push({
        path: url,
        query: { sn: this.sn,
                 shopId: this.shopId,
                 shopName: this.shopName,
                 printSourceSwitch: this.printSourceSwitch,
                 type: this.type,
                 deviceName: this.deviceName,
                 bindCodePlateList: JSON.stringify(this.bindCodePlateList),
                 supplierId: this.supplierId}
      });
    },
    linkToWiFiSettings() {
      //快小盒配网
      if (this.type == 20||this.type == 32||this.type == 38) {
        this.$router.push({
          path: "/qrCodeSound/mainSettings/networkSetting",
          query: {
            sn: this.sn,
            shopId: this.shopId,
            type: this.type,
            online: true
          }
        });
        return;
      }

      //码卡龙跳转配置WiFi（需要调用接口校验码卡龙是否在线）
      const url = `app/voice/deviceInfo.do?sn=${this.sn}&type=${this.type}`;
      this.ajax({
        url: url,
        type: "get",
        controlLoading: true
      })
        .then(res => {
          //如果在线则去配网，如果离线跳转引导页
          if (res.success == true) {
            if (String(res.resultObject.status) === "1") {
              this.$router.push({
                path: "/qrCodeSound/mainSettings/networkSetting",
                query: {
                  sn: this.sn,
                  shopId: this.shopId,
                  type: this.type,
                  online: true
                }
              });
            } else {
              this.$router.push({
                path: "/qrCodeSound/mainSettings/authNone",
                query: {
                  className: "mkl-offline",
                  sn: this.sn,
                  shopId: this.shopId,
                  type: this.type,
                }
              });
            }
          } else {
            Toast(res.msg);
          }
        })
        .catch(err => {

        });
    },
    //码卡龙修改设备名称
    linkToDeviceName() {
      if (!this.shopId) {
        Toast("未获取到门店id");
        return;
      }
      this.modalVisible = true;
    },
    //关闭码卡龙修改设备名称
    cancelDeviceName() {
      this.modalVisible = false;
      this.deviceName = this.deviceInfo.deviceName;
    },
    //提交修改设备名称
    submitDeviceName() {
      if (!this.deviceName) {
        Toast("请输入设备名称");
        return;
      }
      const url = `app/voice/updateDeviceName.do?sn=${this.sn}&deviceName=${
        this.deviceName
        }`;
      this.ajax({
        url: url,
        type: "get",
        controlLoading: true
      })
        .then(res => {
          if (res.success == true) {
            this.modalVisible = false;
            this.deviceInfo.deviceName = this.deviceName;
            Toast("修改成功");
          } else {
            this.deviceName = this.deviceInfo.deviceName;
            Toast(res.msg);
          }
        })
        .catch(err => {
          this.deviceName = this.deviceInfo.deviceName;

        });
    },
    //码卡龙设置广告图片
    linkToAdPic() {
      if (this.deviceInfo.source === undefined || this.deviceInfo.source === null || this.deviceInfo.source === "") {
        Toast("正在获取设备信息...");
        return;
      }
      if (!this.shopId) {
        Toast("未获取到门店id");
        return;
      }
      if (this.deviceInfo.source !== 8) {
        //订单来源（8 运营支撑平台）
        const url = "/qrCodeSound/mainSettings/adUpload";
        this.$router.push({
          path: url,
          query: {
            sn: this.sn,
            shopId: this.shopId,
            type: this.type
          }
        });
      } else {
        MessageBox({
          title: "",
          message: "该设备不支持广告位，请联系客服",
          showCancelButton: false,
          confirmButtonText: "知道了",
          closeOnClickModal: false
        });
      }
    },
    //解除绑定
    handleUnBind() {
      let msg="解绑后设备无法语音播报，确定要解绑吗？"
      if(this.type == 20||this.type == 32){
        msg="解绑后设备无法收款，确定要解绑吗？"
      }
      MessageBox({
        title: "解除绑定",
        message: msg,
        showCancelButton: true,
        closeOnClickModal: false
      }).then(action => {
        if (action == "confirm") {
          this.unbindReq();
        }
      });
    },
    unbindReq() {
      if (!this.shopId) {
        Toast("未获取到门店id");
        return;
      }
      const url = `app/voice/unbindShop.do?sn=${this.sn}&type=${
        this.type
        }&shopId=${this.shopId}`;
        console.log(url);
      this.ajax({
        url: url,
        type: "get",
        controlLoading: true
      })
        .then(res => {
          if (res.success == true) {
            const url = "/qrCodeSound/mainSettings/unBindingSuccess";
            this.$router.push({
              path: url,
              query: { from: this.from }
            });
          } else {
            MessageBox({
              title: "解绑失败",
              message: res.msg,
              showCancelButton: false,
              confirmButtonText: "知道了",
              closeOnClickModal: false
            });
          }
        })
        .catch(err => {

        });
    },
    //获取设备信息
    getDeviceInfo(callBack) {
      const url = `app/voice/deviceInfo.do?sn=${this.sn}&type=${this.type}`;
      this.ajax({
        url: url,
        type: "get",
        controlLoading: false
      })
        .then(res => {
          callBack && callBack();
          if (res.success == true) {
            this.deviceInfo = res.resultObject;
            this.deviceName = this.deviceInfo.deviceName;
            this.printSourceSwitch = this.deviceInfo.printSourceSwitch;
            if (this.deviceInfo.shopId) {
              this.shopId = this.deviceInfo.shopId;
            }
          } else {
            if (res.code == -2) {
              Toast("设备已被解绑，暂不支持操作");
              window.setTimeout(() => {
                if (this.from == "machinesManage") {
                  this.$router.back();
                } else {
                  //this.$router.push({ path: "/" });
                  jsBridge.closeWindow();
                }
              }, 2000);
            } else {
              Toast(res.msg);
            }
          }
        })
        .catch(err => {
          callBack && callBack();
        });
    },

    doCopy(content) {
      if (!content) {
        return;
      }
      this.$copyText(content).then(
        e => {
          Toast("复制成功");
        },
        e => {
          Toast("您的系统版本过低,请长按手动复制");
        }
      );
    }
  },
  computed: {
    headerTitle() {
      // this.deviceName = window.CommonUtil.getMachineNameByType(this.type);
      return this.deviceName;
    }
  },
  created() {
    this.from = window.CommonUtil.getUrlParam2("from");
    this.sn = window.CommonUtil.getUrlParam2("sn");
    this.type = window.CommonUtil.getUrlParam2("type");
    this.shopId = window.CommonUtil.getUrlParam2("shopId");
    this.shopName = window.CommonUtil.getUrlParam2("shopName");
    this.supplierId = window.CommonUtil.getUrlParam2("supplierId");
    this.deviceName = window.CommonUtil.getUrlParam2("deviceName");
    this.deviceInfo.shopId = window.CommonUtil.getUrlParam2("shopId");

    this.getDeviceInfo();
    if (this.type == '54') {
      this.getPrintBindCodePlateCount();
    }
  },
  components: {
    customHeader,
    messageComfirm,
    inputClear
  }
};
</script>

<style lang="scss" scoped>
@import "qrCodeSound";
.sm-txt {
  @include remCalc(font-size, 32);
  @include remCalc(margin-top, 50);
  color: #0193fd;
  text-align: center;
  a {
    color: #0193fd;
  }
}
</style>
